<template>
  <div
    class="index"
    style="height: 100vh; overflow: auto; background: rgb(246, 248, 251);"
  >
    <div style="width: 7.5rem; margin: 0px auto; ">
      <div><img :src="all2.image2" style="width: 7.5rem;" /></div>
      <div
        style="padding: 0.3rem; background: #fff; border-radius: 0.3rem; margin: 0.3rem;"
      >
        <div
          style="font-size: 0.35rem; margin-bottom: 0.2rem;"
          v-if="!all2.sale_name"
        >
          {{ all2.title }}
        </div>
        <div
          style="font-size: 0.35rem; margin-bottom: 0.2rem;"
          v-if="all2.sale_name"
        >
          {{ all2.sale_name }}
        </div>
        <div
          style="font-size: 0.39rem; font-weight: bold; margin-bottom: 0.2rem;"
        >
          <!-- {{all2.yuezu || '--'}} -->
          <span v-if="all2.yuezu">{{ all2.yuezu }}</span>
          <span v-if="!all2.yuezu">
            <span v-if="all2.yuezu === 0">0</span>
            <span v-if="!all2.yuezu === 0">--</span>
          </span>

          <span style="font-size: 0.27rem">元/月</span>
        </div>
        <div
          style="background: linear-gradient(180.00deg, rgb(246, 248, 251),rgb(235, 242, 255) 100%); border-radius: 0.2rem; justify-content: space-around; padding: 0.25rem 0; text-align: center;"
          class="flex"
        >
          <div>
            <!-- <div style="font-size: 0.27rem; margin-bottom: 0.1rem; font-weight: bold;">{{all2.liuliang || '--'}}<span style="font-size: 0.24rem; margin-left: 0.05rem;" v-if="all2.liuliang">G</span></div>
            -->
            <div
              style="font-size: 0.33rem; margin-bottom: 0.1rem; font-weight: bold;"
              class="flexcc"
            >
              <span v-if="all2.liuliang">{{ all2.liuliang }}</span>
              <span v-if="!all2.liuliang">
                <span v-if="all2.liuliang === 0">0</span>
                <span v-if="!all2.liuliang === 0">--</span>
              </span>
              <span
                style="font-size: 0.25rem; position: relative; top: 2px; margin-left: 2px;"
                v-if="all2.liuliang || all2.liuliang === 0"
                >G</span
              >
            </div>

            <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">
              通用流量
            </div>
          </div>
          <div>
            <!-- <div style="font-size: 0.27rem; margin-bottom: 0.1rem; font-weight: bold;">{{all2.dx_liuliang || '--'}}<span style="font-size: 0.24rem; margin-left: 0.05rem;" v-if="all2.dx_liuliang">G</span></div> -->

            <div
              style="font-size: 0.33rem; margin-bottom: 0.1rem; font-weight: bold;"
              class="flexcc"
            >
              <span v-if="all2.dx_liuliang">{{ all2.dx_liuliang }}</span>
              <span v-if="!all2.dx_liuliang">
                <span v-if="all2.dx_liuliang === 0">0</span>
                <span v-if="!all2.dx_liuliang === 0">--</span>
              </span>
              <span
                style="font-size: 0.25rem; position: relative; top: 2px; margin-left: 2px;"
                v-if="all2.dx_liuliang || all2.dx_liuliang === 0"
                >G</span
              >
            </div>
            <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">
              定向流量
            </div>
          </div>
          <div>
            <div
              style="font-size: 0.33rem; margin-bottom: 0.1rem; font-weight: bold;"
              class="flexcc"
            >
              <span v-if="all2.yuyin">{{ all2.yuyin }}</span>
              <span v-if="!all2.yuyin">
                <span v-if="all2.yuyin === 0">0</span>
                <span v-if="!all2.yuyin === 0">--</span>
              </span>
              <!-- <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.liuliang || item.liuliang === 0">G</span> -->
              <span
                style="font-size: 0.25rem; position: relative; top: 1px; margin-left: 2px;"
                v-if="all2.yuyin_type == 0 && (all2.yuyin || all2.yuyin === 0)"
                >分钟</span
              >
              <span
                style="font-size: 0.25rem; position: relative; top: 1px; margin-left: 2px;"
                v-if="all2.yuyin_type == 1"
                >元/分钟</span
              >
            </div>
            <!-- <div style="font-size: 0.27rem; margin-bottom: 0.1rem; font-weight: bold;">{{all2.yuyin || '--'}}
              <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="all2.yuyin_type == 0 && all2.yuyin">分钟</span>
              <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="all2.yuyin_type == 1">元/分钟</span>
            </div> -->
            <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">
              通话时长
            </div>
          </div>
        </div>
      </div>
      <div
        style="padding: 0.3rem; background: #fff; border-radius: 0.3rem; margin: 0.3rem;"
      >
        <div class="flex">
          <div
            style="font-size: 0.33rem; color: rgb(120, 125, 133); margin-right: 0.2rem; margin-bottom: 0.2rem;"
          >
            优势
          </div>
          <div class="flex">
            <div
              style="background: rgb(255, 223, 223); border-radius: 0.18rem; padding: 0.08rem 0.17rem; font-size: 0.27rem; color: rgb(254, 61, 61); margin-right: 0.2rem; margin-bottom: 0.2rem;"
              v-if="all2.selling_point.length > 0 && all2.selling_point[0]"
            >
              {{ all2.selling_point[0] }}
            </div>
            <div
              style="background: rgb(223, 255, 228); border-radius: 0.18rem; padding: 0.08rem 0.17rem; font-size: 0.27rem; color: rgb(8, 143, 26); margin-right: 0.2rem; margin-bottom: 0.2rem;"
              v-if="all2.selling_point.length > 0 && all2.selling_point[1]"
            >
              {{ all2.selling_point[1] }}
            </div>
            <div
              style="background: rgb(233, 241, 255); border-radius: 0.18rem; padding: 0.08rem 0.17rem; font-size: 0.27rem; color: rgb(0, 90, 255); margin-right: 0.2rem; margin-bottom: 0.2rem;"
              v-if="all2.selling_point.length > 0 && all2.selling_point[2]"
            >
              {{ all2.selling_point[2] }}
            </div>
            <div
              style="background: rgb(246, 248, 251); border-radius: 0.18rem; padding: 0.08rem 0.17rem; font-size: 0.27rem; color: rgb(120, 125, 133); margin-bottom: 0.2rem;"
              v-if="all2.selling_point.length > 0 && all2.selling_point[3]"
            >
              {{ all2.selling_point[3] }}
            </div>
          </div>
        </div>
        <div class="flexc">
          <div
            style="font-size: 0.33rem; color: rgb(120, 125, 133); margin-right: 0.2rem; margin-bottom: 0.2rem;"
          >
            注意
          </div>
          <div class="flex">
            <div style="width: 5.5rem; font-size: 0.27rem;">
              {{ all2.points }}
            </div>
          </div>
        </div>
      </div>
      <div
        id="inhear"
        class="flexcc"
        v-if="take_number"
        style="width: 5rem; margin: 0 auto;"
      >
        <el-divider content-position="center">选号办理</el-divider>
      </div>
      <xuanhao
        v-if="take_number"
        :gth_page_id="gth_page_id"
        :take_number="take_number"
        :pick_number_rules="pick_number_rules"
        @upnum="upnum"
      />
      <div class="flexcc" style="width: 5rem; margin: 0 auto;">
        <el-divider content-position="center">商品详情</el-divider>
      </div>
      <div
        style="width: 6.9rem; font-size: 0.2rem; margin: 0.2rem auto; padding-bottom: 1.5rem;"
        v-html="all2.description"
      ></div>

      <!-- 是否下架 -->
      <div class="dibuanquan" v-if="all2.status==100"
        style="position: fixed; left: 0; bottom: 0; width: 7.5rem; padding: 0.1rem; background: #fff;"
      >
        <div
          v-if="!$route.query.one && !$route.query.app"
          style="float: left;display: flex;align-items: center;margin-top: 0.1rem;"
        >
          <div
            class="flexcc"
            style="margin-left:0.1rem;margin-right:0.1rem;width: 0.8rem;"
            @click="shouye"
            v-if="alls.h5_index == 1"
          >
            <div>
              <div class="flexcc">
                <img
                  src="../../../static/img/xiadan1.png"
                  style="width: 0.33rem; margin-bottom: 0.05rem;"
                />
              </div>
              <div style="font-size: 0.2rem; text-align: center;">首页</div>
            </div>
          </div>
          <div
            class="flexcc"
            style="margin-right: 0.4rem;width: 0.8rem;margin-left: 0.2rem;"
            @click="show3 = true"
            v-if="bushijd && alls.h5_cust == 1 && (alls.img || alls.cust_url)"
          >
            <div>
              <div class="flexcc">
                <img
                  src="../../../static/img/xiadan2.png"
                  style="width: 0.33rem; margin-bottom: 0.05rem;"
                />
              </div>
              <div style="font-size: 0.2rem; text-align: center;">联系客服</div>
            </div>
          </div>
        </div>

        <div v-if="$route.query.one" style="width: 2.5rem; font-size: 12px;">
          &nbsp;
        </div>
        <a
          v-if="take_number"
          href="#inhear"
          style="background: rgb(0, 90, 255); margin-left: 0.3rem; border-radius: 0.4rem; font-size: 0.28rem; height: 0.8rem; color: #fff;"
          class="flexcc"
          @click="tipsxh"
          >立即办理<span style="margin-left:5px" v-if="all2.card_cost != '0.00'"
            >￥{{ all2.card_cost }}</span
          ></a
        >
        <div v-else>
          <div
            @click="showshow"
            style="background: rgb(0, 90, 255); margin-left: 0.3rem; border-radius: 0.4rem; font-size: 0.28rem; height: 0.8rem; color: #fff;"
            class="flexcc"
            v-if="all2.order_button"
          >
            {{ all2.order_button
            }}<span style="margin-left:5px" v-if="all2.card_cost != '0.00'"
              >￥{{ all2.card_cost }}</span
            >
          </div>
          <div
            @click="showshow"
            style="background: rgb(0, 90, 255); margin-left: 0.3rem;margin-right: 0.3rem; border-radius: 0.4rem; font-size: 0.28rem;height: 0.8rem; color: #fff;"
            class="flexcc"
            v-if="!all2.order_button"
          >
            立即办理<span
              style="margin-left:5px"
              v-if="all2.card_cost != '0.00'"
              >￥{{ all2.card_cost }}</span
            >
          </div>
        </div>
      </div>
      <div class="t_xiajia" v-if="all2.status==0" >
        该商品已下架啦~<span @click="backgo" style="color: #007AFF;margin-left: 15px;">查看其他商品</span>
       </div>
    </div>
    <van-action-sheet v-model="show" title="填写下单信息">
      <div style="padding: 0.3rem;">
        <div v-if="take_number" class="flexc" style="margin-bottom: 0.2rem;">
          <div>
            <img
              src="../../../static/img/xiadan3.png"
              style="width: 0.36rem; margin-right: 0.1rem;"
            />
          </div>
          <div style="font-size: 0.34rem;">
            选择号码：{{ all.pretty_number }}
          </div>
        </div>

        <div
          class="flexc"
          style="margin-bottom: 0.2rem;"
          v-if="(all2.need_idcard && shishangpinye) || (!shishangpinye && all2.need_num)"
        >
          <div>
            <img
              src="../../../static/img/xiadan3.png"
              style="width: 0.36rem; margin-right: 0.1rem;"
            />
          </div>
          <div style="font-size: 0.34rem;">入网信息</div>
        </div>
        <div
          style="color: rgb(250, 100, 1); font-size: 0.24rem; margin-bottom: 0.2rem;"
          v-if="(all2.need_idcard && shishangpinye) || (!shishangpinye && all2.need_num)"
        >
          根据国家实名制要求，请准确提供身份证信息
        </div>
        <div
          class="flexc"
          style="border-bottom: 1px solid rgb(227, 232, 241);"
          v-if="(all2.need_idcard && shishangpinye) || (!shishangpinye && all2.need_num)"
        >
          <div
            style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;"
          >
            姓名
          </div>
          <div style="width: 5.3rem;">
            <van-field
              v-model="all.id_card_name"
              placeholder="系统已加密,请放心填写"
            />
          </div>
        </div>
        <div
          class="flexc"
          style="border-bottom: 1px solid rgb(227, 232, 241);"
          v-if="(all2.need_idcard && shishangpinye) || (!shishangpinye && all2.need_num)"
        >
          <div
            style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;"
          >
            身份证号
          </div>
          <div style="width: 5.3rem;">
            <van-field
              v-model="all.id_card_num"
              placeholder="系统已加密,请放心填写"
            />
          </div>
        </div>
        <div
          v-if="
            (all2.show_type == 0 &&
              all.id_card_name &&
              all.id_card_num.length == 18) ||
              all2.show_type == 1 ||
              !shishangpinye
          "
        >
          <div class="flexc" style="margin-bottom: 0.2rem; margin-top: 0.4rem;">
            <div>
              <img
                src="../../../static/img/xiadan4.png"
                style="width: 0.36rem; margin-right: 0.1rem;"
              />
            </div>
            <div style="font-size: 0.34rem;">收货信息</div>
          </div>
          <div
            class="flexc"
            style="border-bottom: 1px solid rgb(227, 232, 241);"
            v-if="!all2.same_name"
          >
            <div
              style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;"
            >
              收货人
            </div>
            <div style="width: 5.3rem;">
              <van-field
                v-model="all.address_name"
                placeholder="请输入收货人"
              />
            </div>
          </div>
          <div
            class="flexc"
            style="border-bottom: 1px solid rgb(227, 232, 241);"
          >
            <div
              style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;"
            >
              联系电话
            </div>
            <div style="width: 5.3rem;">
              <van-field
                v-model="all.mobile"
                type="tel"
                placeholder="请输入联系电话"
              />
            </div>
          </div>

          <div
            class="flexc"
            style="border-bottom: 1px solid rgb(227, 232, 241);"
            v-if="all2.code_verify"
          >
            <div
              style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;"
            >
              验证码
            </div>
            <div style="width: 5.3rem; position: relative;">
              <div
                class="code"
                style="right: 0rem; top:0.1rem; position: absolute; font-size: 12px; z-index: 999; "
              >
                <van-button
                  type="info"
                  size="small"
                  @click="getcode"
                  :disabled="yzmuse"
                  style="font-size: 12px;"
                  >{{ yzm }}</van-button
                >
              </div>
              <van-field v-model="all.code" placeholder="请输入验证码" />
            </div>
          </div>
          <!--          <div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem;  margin-bottom: 0.2rem; border-radius: 0.2rem; position:relative;" v-if="all2.code_verify">
          	<div style="width: 1.7rem; overflow:hidden;"><span style="margin-right:5px; color: #f00;">*</span>验证码</div>
          	<div style="flex-grow: 1; padding-left: 0.2rem; color: #2D3038; font-size: 0.26rem;">
          		<div class="code" style="right: 0.2rem; top:0.2rem; "><van-button type="info" size="small" @click="getcode" type="tel" :disabled="yzmuse" style="font-size: 12px;" >{{yzm}}</van-button></div>
          		<van-field v-model="all.code" placeholder="请输入验证码" />
          	</div>
          </div> -->

          <div
            class="flexc"
            style="border-bottom: 1px solid rgb(227, 232, 241); position: relative;"
          >
            <div
              style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;"
            >
              所在地区
            </div>
            <div style="width: 5.3rem;" @click="show2 = true">
              <div
                class="where"
                style="line-height: 44px; font-size: 14px; padding-left: 16px;"
              >
                {{ shengshiqu }}
                <van-icon
                  name="arrow"
                  size="14"
                  style="position: absolute; top: 0px; line-height:44px; right:0;"
                />
              </div>
            </div>
          </div>
          <div
            class="flexc"
            style="border-bottom: 1px solid rgb(227, 232, 241);"
          >
            <div
              style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;"
            >
              详细地址
            </div>
            <div style="width: 5.3rem;">
              <van-field
                v-model="all.address"
                placeholder="小区，写字楼，门牌号等"
              />
            </div>
          </div>
        </div>

        <div v-if="all2.is_need_photo" style="font-size: 12px;">
          <div style="font-size: 0.3rem; padding:0.3rem 0 0">
            身份证照片上传：
          </div>
          <div style="border-bottom:1px #EAEAEA solid; padding:0.3rem 0">
            根据运营商要求，该套餐需上传身份证照片才可开卡，该照片仅用于运营商开卡，请按照要求上传正确的照片。
          </div>
          <div
            class="flex"
            style="padding: 0.25rem 0;justify-content: space-around;"
          >
            <div style="width: 3rem; background: #f7f8fa;" class="flexcc">
              <div style="width: 100%; height: 100%;" class="flexcc">
                <van-uploader
                  :after-read="afterRead1"
                  deletable="false"
                  preview-size="3rem"
                  show-upload="false"
                >
                  <div v-if="all.face_url">
                    <img :src="all.face_url" style="width: 3rem; " />
                  </div>
                  <div
                    style="width: 100%; height: 100%;"
                    class="flexcc"
                    v-if="!all.face_url"
                  >
                    <van-icon name="photograph" color="#999" size="30" />
                  </div>
                </van-uploader>
              </div>
            </div>
            <div style="width: 3rem;" class="flexcc">
              <img src="../../../static/img/face.jpg" style="width: 3rem;" />
            </div>
          </div>
          <div style="padding: 0.1rem 0;">
            证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS
          </div>
          <div
            class="flex"
            style="padding: 0.25rem 0;justify-content: space-around;"
          >
            <div style="width: 3rem; background: #f7f8fa;" class="flexcc">
              <div style="width: 100%; height: 100%;" class="flexcc">
                <van-uploader
                  :after-read="afterRead2"
                  deletable="false"
                  preview-size="3rem"
                  show-upload="false"
                >
                  <div v-if="all.back_url">
                    <img :src="all.back_url" style="width: 3rem;" />
                  </div>
                  <div
                    style="width: 100%; height: 100%;"
                    class="flexcc"
                    v-if="!all.back_url"
                  >
                    <van-icon name="photograph" color="#999" size="30" />
                  </div>
                </van-uploader>
              </div>
            </div>
            <div style="width: 3rem;" class="flexcc">
              <img src="../../../static/img/back.jpg" style="width: 3rem;" />
            </div>
          </div>
          <div style="padding: 0.1rem 0;">
            证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS
          </div>
          <div
            class="flex"
            style="padding: 0.25rem 0;justify-content: space-around;"
          >
            <div style="width: 3rem; background: #f7f8fa;" class="flexcc">
              <div style="width: 100%; height: 100%;" class="flexcc">
                <van-uploader
                  :after-read="afterRead3"
                  deletable="false"
                  preview-size="3rem"
                  show-upload="false"
                >
                  <div v-if="all.hand_url">
                    <img :src="all.hand_url" style="width: 3rem;" />
                  </div>
                  <div
                    style="width: 100%; height: 100%;"
                    class="flexcc"
                    v-if="!all.hand_url"
                  >
                    <van-icon name="photograph" color="#999" size="30" />
                  </div>
                </van-uploader>
              </div>
            </div>
            <div style="width: 3rem;" class="flexcc">
              <img src="../../../static/img/head.png" style="width: 3rem;" />
            </div>
          </div>
          <div style="padding: 0.1rem 0;">
            无需手持身份证，胸部以上，露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS
          </div>





          <div style="padding: 0.1rem 0;">
            请上传真实环境拍摄的免冠照，不要上传证件照
          </div>
        </div>

        <div v-if="all2.is_need_custom_photo == 1">
          <div
            class="flex"
            style="padding: 0.25rem 0;justify-content: space-around;"
          >
            <div style="width: 6.4rem; min-height: 3rem; gap: 0.4rem; " class="flexcc">
              <div style="flex: 1; height: 100%; background: #f7f8fa;" class="flexcc">
                <van-uploader
                  :after-read="afterRead4"
                  deletable="false"
                  preview-size="3rem"
                  show-upload="false"
                >
                  <div v-if="all.custom_photos_url">
                    <img :src="all.custom_photos_url" style="width: 6.4rem;" />
                  </div>
                  <div
                    style="width: 100%; height: 100%;"
                    class="flexcc"
                    v-if="!all.custom_photos_url"
                  >
                    <van-icon name="photograph" color="#999" size="30" />
                  </div>
                </van-uploader>
              </div>

              <div style="flex: 1; height: 3rem; background: rgb(255, 255, 255);" class="flexcc" v-if="all2.custom_photo_illustration">
                 <img :src="all2.custom_photo_illustration" style="width: 3rem;" />
              </div>

            </div>
           <!-- <div style="width: 3rem; height: 3rem; background: rgb(255, 255, 255);" class="flexcc">
              <img src="../../../static/img/head.png" style="width: 3rem;" />
            </div> -->
          </div>
          <div style="padding: 0.1rem 0; font-size: 12px;">
            {{all2.custom_photo_description}}上传
          </div>
        </div>

        <div
          style="margin-top: 0.2rem; font-size: 12px;"
          class="flexc"
          v-if="all2.pact_have"
        >
          <van-checkbox
            @change="changeagree"
            v-model="agreechecked"
            style="margin-right: 0.1rem; font-size: 12px;"
            >我已阅读并同意</van-checkbox
          >
          <span
            style="color: #007AFF;font-size: 12px;"
            v-for="(item, index) in all2.pact_list"
            :key="index"
            @click="dakaixieyi(item)"
            >《{{ item.title }}》</span
          >
        </div>
        <div
          @click="xiadan"
          style="background: rgb(0, 90, 255); border-radius: 0.4rem; font-size: 0.28rem; width: 6.9rem; height: 0.8rem; color: #fff; margin-top: 0.7rem;"
          class="flexcc"
          v-if="all2.order_button"
        >
          {{ all2.order_button
          }}<span style="margin-left:5px" v-if="all2.card_cost != '0.00'"
            >￥{{ all2.card_cost }}</span
          >
        </div>
        <div
          @click="xiadan"
          style="background: rgb(0, 90, 255); border-radius: 0.4rem; font-size: 0.28rem; width: 6.9rem; height: 0.8rem; color: #fff; margin-top: 0.7rem;"
          class="flexcc"
          v-if="!all2.order_button"
        >
          立即办理<span style="margin-left:5px" v-if="all2.card_cost != '0.00'"
            >￥{{ all2.card_cost }}</span
          >
        </div>
      </div>
    </van-action-sheet>

    <van-popup v-model="show2" position="bottom">
      <van-area
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        :value="nowcitycode"
        @confirm="queren"
        @cancel="quxiao"
      />
    </van-popup>
    <van-popup v-model="jiazaizhong" :close-on-click-overlay="false"
      ><van-loading type="spinner" color="#fff"
    /></van-popup>

    <van-popup v-model="show3" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center;">
        <div
          style="font-size: 0.36rem; font-weight: bold; margin-bottom: 0.4rem;"
        >
          联系客服
        </div>
        <div style="margin-bottom: 0.2rem;" class="flexcc">
          <img :src="alls.img" style="width: 3.2rem; " />
        </div>
        <div
          style="margin-bottom: 0.2rem; font-size: 0.2rem; color: rgb(120, 119, 119);"
        >
          长按识别二维码加我为好友
        </div>
        <div
          style="margin-bottom: 0.2rem; font-size: 0.18rem; color: rgb(178, 177, 177);"
        >
          非微信环境请截图保存在微信内扫一扫选择相册
        </div>
        <div
          @click="lianxi"
          v-if="alls.cust_url"
          style="background: rgb(0, 90, 255); border-radius: 0.4rem; font-size: 0.28rem; width: 4.5rem; height: 0.8rem; color: #fff; margin-top: 0.3rem; margin-bottom: 0.2rem;"
          class="flexcc"
        >
          联系客服
        </div>
        <div
          style="margin-bottom: 0.1rem; font-size: 0.18rem; color: rgb(120, 119, 119);"
        >
          直接打开微信聊天窗口与我沟通
        </div>
      </div>
    </van-popup>

    <van-popup
      v-model="logqueding"
      style="width: 90%; height: 60vh; font-size: 14px; padding: 0.3rem; height: auto !important; border-radius: 0.1rem;"
    >
      <div
        v-if="this.all2.protocol_qz"
        style=" max-height: 60vh;overflow: auto; "
      >
        <div style="font-size: 14px; text-align: center;">
          {{ log1html.title }}
        </div>
        <div
          style="font-size: 12px;"
          class="fz"
          v-html="log1html.content"
        ></div>
      </div>
      <div v-else style="margin-bottom: 0.3rem;">
        <div style="margin-bottom: 0.3rem;">请先阅读，并点击同意以下协议</div>
        <span
          style="color: #007AFF;font-size: 12px;"
          v-for="(item, index) in all2.pact_list"
          :key="index"
          @click="dakaixieyi(item)"
          >《{{ item.title }}》</span
        >
      </div>
      <div class="flexcc">
        <div>
          <van-button type="default" size="small" @click="disagree"
            >不同意</van-button
          >
        </div>
        <div style="margin-left: 0.3rem;">
          <van-button type="info" size="small" @click="yongyi">同意</van-button>
        </div>
      </div>
    </van-popup>

    <van-popup
      v-model="log1"
      class="van-popup2"
      style="width: 90%; height: 60vh; color: #fff; padding: 0.3rem;"
    >
      <div style="font-size: 14px; text-align: center;">
        {{ log1html.title }}
      </div>
      <div style="font-size: 12px;" class="fz" v-html="log1html.content"></div>
    </van-popup>

    <van-popup
      v-model="fangzha"
      class="van-popup2"
      style="width: 90%; background: rgb(0, 72, 255); border-radius: 0.2rem; color: #fff; padding: 0.3rem; font-size: 14px;"
    >
      <div class="flexcc" style="margin-bottom: 0.2rem;">
        <div style="font-size: 14px; margin-right: 0.1rem;">防诈提醒</div>
        <div>
          <img src="../../../static/img/fangzha.png" style="width: 0.3rem;" />
        </div>
      </div>
      <div style="font-weight: bold;margin-bottom: 0.2rem;">
        公安部郑重提示：
      </div>
      <div style="margin-bottom: 0.4rem;">
        请勿将您本人身份证信息实名的号卡用于诈骗、黑产等不合法行为，请勿将号卡进行转卖、租借他人使用，如丢失号卡请及时前往营业厅挂失、注销。<span
          style="color: rgb(255, 211, 0);"
          >如号码涉嫌诈骗，实名登记机主需承担法律责任。</span
        >
      </div>
      <div
        style="background: #fff; padding: 0.1rem 0.3rem; color: #000; text-align: center; border-radius: 1rem;"
        @click="showshow"
      >
        我已知晓，并承诺本人使用
      </div>
    </van-popup>
    <van-popup position="bottom" v-model="isshowzf">
      <div style="text-align:center;font-size:18px;padding:20px 0">
        选择支付方式
      </div>
      <div
        v-if="this.all2.wx_switch"
        style="text-align:center;font-size:16px;padding:20px ;border-bottom:1px solid #E5E5E5;display:flex;align-items:center"
        @click="paytype('vx')"
      >
        <img
          src="../../../static/img/wxzf.png"
          style="width:30px;margin-right:15px"
        />
        微信支付
      </div>
      <div
        v-if="this.all2.ali_switch"
        style="text-align:center;font-size:16px;padding:20px ;display:flex;align-items:center"
        @click="paytype('zfb')"
      >
        <img
          src="../../../static/img/zfbzf.png"
          style="width:30px;margin-right:15px"
        />
        支付宝支付
      </div>
      <!-- <div style="text-align:center;font-size:16px;padding:20px 0;" v-if="!this.all2.ali_switch&&!this.all2.wx_switch">未开通支付方式</div> -->
    </van-popup>
    <div v-html="payGateWay" ref="alipayWap"></div>
  </div>
</template>
<script>
import * as qiniu from "qiniu-js";
import QRCode from "qrcodejs2";
import chuantu from "@/components/chuantu.vue";
import xuanhao from "@/components/xuanhao.vue";
export default {
  components: {
    chuantu,
    xuanhao
  },
  name: "index",
  data() {
    return {
      fangzha: false,
      fangzha2: false,
      logqueding: false,
      log1: false,
      log1html: "",
      shengshiqu: "省、市、区",
      jiazaizhong: false,
      areaList: {},
      show: false,
      show2: false,
      show3: false,
      all2: {
        selling_point: []
      },
      all: {
        address: "",
        address_city: "",
        address_district: "",
        address_mobile: "",
        address_name: "",
        address_province: "",
        goods_sku: "",
        id_card_name: "",
        id_card_num: "",
        mobile: "",
        share_id: "",
        source: "weixiaodian",
        pretty_number: "",
        custom_photos_url:""
      },
      list: [],
      alls: "",
      take_number: "",
      gth_page_id: "",

      shishangpinye: false,
      checked: false,
      pick_number_rules: "",
      pickobg: {},
      nowcitycode: "",
      isshowzf: false,
      iswx: null,
      orderurl: "",
      payGateWay: "",
      iscanxiadan: true,
      agreechecked: false,
      bushijd: true,

      yzm: "获取验证码",
      yzmnum: 60,
      yzmuse: false
    };
  },
  async created() {

    if(this.$route.query.token){
      let ttoken = localStorage.getItem('ttoken')
      if(ttoken && this.$route.query.token == ttoken){

      }else{
        axios.post("/api/cainiao/login",{token:this.$route.query.token}).then(response => {
          if (response.data.msg.code == 0) {
            localStorage.setItem('ttoken',this.$route.query.token)
          }else {
            this.$message.error(response.data.msg.info);
          }
        })
      }

    }

    if (location.origin == "http://kasading.cn") {
      this.bushijd = false;
    }
    // js判断是否是微信环境
    //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
    var ua = window.navigator.userAgent.toLowerCase();
    //通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      // 是微信环境
      console.log("是微信环境");
      this.iswx = true;

      //通过自己后台写的接口拿到配置的appid
      //拼接地址后跳转微信，成功将返回拼接的链接，并携带code参数，code只能用一次
      axios.get("/api/wechat/get").then(response => {
        if (response.data.msg.code == 0) {
          if (response.data.data) {
            this.appid = response.data.data;
            let url = location.href;

            console.log("获取=-=====appid");
            console.log(this.appid);
            console.log(url);

            //通过拿到的code,走自己后台的接口，即可获得微信信息，有的需要授权，有的不需要
            //例如获取openid
            if (this.$route.query.code) {
              if (!localStorage.getItem("vxopenid")) {
                axios
                  .get("/api/wechat/code2token?code=" + this.$route.query.code)
                  .then(response => {
                    if (response.data.msg.code == 0) {
                      localStorage.setItem(
                        "vxopenid",
                        response.data.data.openid
                      );
                    }
                  });
              }
            } else {
              window.location.href =
                "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                this.appid +
                "&redirect_uri=" +
                encodeURIComponent(url) +
                "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
            }
          } else {
            // vant.Toast('未配置微信信息');
          }
        }
      });
    } else {
      //不是微信环境
      this.iswx = false;
      console.log(location.href);
    }

    // 获取省市区
    await this.getssq();

    if (this.$route.query.shop_id) {
      this.all.share_id = window.atob(this.$route.query.shop_id);
    } else {
      this.all.share_id = 0;
    }
    // https://static.91haoka.cn/areanew.json
    // https://static.91haoka.cn/tongyidiqu.json
    await axios
      .get("https://file.91haoka.cn/tongyidiqu.json")
      .then(response => {
        this.areaList = response.data;

        //     let data = JSON.parse(JSON.stringify(this.areaList.province_list))
        //     let data2 = JSON.parse(JSON.stringify(this.areaList.city_list))
        //     let data3 = JSON.parse(JSON.stringify(this.areaList.county_list))

        //     Object.keys(data).map((key3, item3) => {
        //       console.log(key3,item3,data[key3])
        //       if(data[key3].includes('北京')){
        //         delete this.areaList.province_list[key3]
        //       }
        //     })

        //     Object.keys(data2).map((key3, item3) => {
        //       console.log(key3,item3,data2[key3])
        //       if(data2[key3].includes('石家庄')){
        //         delete this.areaList.city_list[key3]
        //       }
        //     })
      });

    this.getinfo();
    this.getinfo2();
  },
  mounted() {},
  methods: {
    //获取验证码
    getcode: function() {
      var that = this;
      if (this.all.mobile.length != 11) {
        vant.Toast("请输入正确手机号");
        return;
      }
      that.yzmuse = true;
      that.yzmnum = 60;
      that.timer = setInterval(function() {
        if (that.yzmnum == 0) {
          clearInterval(that.timer);
          that.yzm = "获取验证码";
          that.yzmuse = false;
        } else {
          that.yzmuse = true;
          that.yzm = that.yzmnum + "秒重新获取";
          that.yzmnum = that.yzmnum - 1;
        }
      }, 1000);

      axios
        .post(`/api/order/code/send`, { mobile: this.all.mobile })
        .then(function(response) {
          if (response.data.msg.code == 0) {
            vant.Toast("验证码已发送");
          } else {
            if (response.data.msg.code == 440) {
              vant.Toast(
                "请" + response.data.msg.info + "秒之后重新获取验证码"
              );

              that.yzmnum = response.data.msg.info;
            } else {
              vant.Toast(response.data.msg.info);
            }
          }
        });
    },

    yongyi: function() {
      this.logqueding = false;
      // this.all2.pact_check = true
      this.agreechecked = true;
    },
    showshow: function() {
      console.log(localStorage.getItem("fangzha2"));
      if (localStorage.getItem("fangzha2")) {
        this.show = true;
        this.fangzha = false;
      } else {
        this.fangzha = true;

        localStorage.setItem("fangzha2", true);
      }
    },
    dakaixieyi: function(item) {
      this.log1html = item;
      this.log1 = true;
    },
    lianxi: function() {
      window.location.href = this.alls.cust_url;
    },
    shouye: function() {
      if (this.$route.query.shop_id) {
        location.href =
          location.origin + "/h5/index?shop_id=" + this.$route.query.shop_id;
      }

      if (this.$route.query.shops_id) {
        location.href =
          location.origin + "/h5/index?shops_id=" + this.$route.query.shops_id;
      }

      if (!this.$route.query.shop_id && !this.$route.query.shops_id) {
        location.href = location.origin + "/h5/index";
      }
    },
    xiadan: function() {
      //如果是信息流页面的商品 就走配置条件
      if (this.shishangpinye) {
        if (this.all2.need_idcard && !this.all.id_card_num) {
          vant.Toast("请填写身份证号");
          return;
        }
        if (this.all.id_card_num) {
          const chineseIdCardRegex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
          if (chineseIdCardRegex.test(this.all.id_card_num)) {
          } else {
            vant.Toast("身份证号码格式不正确");
            return;
          }
        }
        console.log(
          this.all2.age_limit && this.all2.min_age && this.all2.max_age
        );
        if (this.all2.age_limit && this.all2.min_age && this.all2.max_age) {
          let arr = this.all.id_card_num;
          let nian = arr.substr(6, 4);
          let yue = arr.substr(10, 2);
          let ri = arr.substr(12, 2);
          let quan = nian + "-" + yue + "-" + ri;

          let x = moment()
            .subtract(this.all2.min_age, "years")
            .format("YYYY-MM-DD");
          let z = moment(quan).format("YYYY-MM-DD");
          let y = moment()
            .subtract(this.all2.max_age, "years")
            .format("YYYY-MM-DD");

          let x1 = moment()
            .subtract(this.all2.min_age, "years")
            .format("X");
          let z1 = moment(quan).format("X");
          let y1 = moment()
            .subtract(this.all2.max_age, "years")
            .format("X");

          if ((z < x) & (z > y)) {
          } else {
            vant.Toast(
              "您的年龄不符合要求，无法办理,办理年龄" +
                this.all2.min_age +
                "岁-" +
                this.all2.max_age +
                "岁"
            );
            return;
          }
        }
        if (this.all2.same_name) {
          this.all.address_name = this.all.id_card_name;
        }

        // if(this.all2.is_need_photo && !this.all.face_url && !this.all.back_url && !this.all.hand_url){
        //   vant.Toast('请上传证件');
        //   return
        // }
      } else {
        if (this.all2.pact_have && this.all2.pact_check != 3) {
          if (!this.agreechecked) {
            vant.Toast("请阅读并同意入网协议");
            this.agreechecked = true;
            this.logqueding = true;
            if (this.all2.protocol_qz) {
              this.log1html = this.all2.pact_list[0];
            }
            return;
          }
        }

        if(this.all2.need_num){
          if (!this.all.id_card_name) {
            vant.Toast("请填写姓名");
            return;
          }
          if (!this.all.id_card_num) {
            vant.Toast("请填写身份证号");
            return;
          }

          if (this.all.id_card_num) {
            const chineseIdCardRegex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
            if (chineseIdCardRegex.test(this.all.id_card_num)) {
            } else {
              vant.Toast("身份证号码格式不正确");
              return;
            }
          }
        }


      }
      if (!this.all.address_name) {
        vant.Toast("请填写收货人");
        return;
      }

      if (this.all2.is_need_photo) {
        if (!this.all.face_url || !this.all.back_url || !this.all.hand_url) {
          vant.Toast("请上传证件");
          return;
        }
      }

      if (!this.all.mobile) {
        vant.Toast("请填写联系电话");
        return;
      }

      var regex = /^1[3456789]\d{9}$/;
      if (regex.test(this.all.mobile)) {
      } else {
        vant.Toast("请填写正确的联系电话");
        return;
      }

      if (!this.all.address_province) {
        vant.Toast("请填写省市区");
        return;
      }
      if (!this.all.address_city) {
        vant.Toast("请填写省市区");
        return;
      }
      if (!this.all.address_district) {
        vant.Toast("请填写省市区");
        return;
      }
      if (!this.all.address) {
        vant.Toast("请填写收货地址");
        return;
      }
      if(this.all2.is_need_custom_photo == 1){
        if(this.all.custom_photos_url == ''){
          vant.Toast("请上传"+this.all2.custom_photo_description);
          return;
        }
      }

      this.xiadanzhong = true;

      if (this.$route.query.shops_id || this.$route.query.one) {
        this.all.page_id = this.$route.query.shops_id;
        this.all.id = this.$route.query.id;
        this.orderurl = "/api/fcreate/order";
      } else {
        this.orderurl = "/api/create/order";
      }
      if (this.$route.query.one) {
        this.all.source = this.all2.page_source;
      } else {
        this.all.source = this.alls.store_name;
      }

      this.all.take_num_params = this.pickobg;

      //传个code开始
      Object.keys(this.areaList.province_list).map((item, index) => {
        if (this.areaList.province_list[item] == this.all.address_province) {
          this.all.province_code = item;
        }
      });
      Object.keys(this.areaList.city_list).map((item, index) => {
        if (this.areaList.city_list[item] == this.all.address_city) {
          this.all.city_code = item;
        }
      });
      Object.keys(this.areaList.county_list).map((item, index) => {
        if (this.areaList.county_list[item] == this.all.address_district) {
          this.all.district_code = item;
        }
      });
      //传个code结束

      this.all.openid = localStorage.getItem("vxopenid");

      if (this.all2.card_cost == "0.00") {
        this.all.pay_way = "";
        //下单
        this.xiadango();
      } else {
        if (this.all.pay_way == undefined) {
          if (this.all2.wx_switch && this.all2.ali_switch) {
            //选择支付方式
            this.isshowzf = true;
          } else if (this.all2.wx_switch && !this.all2.ali_switch) {
            //微信
            this.paytype("vx");
          } else if (this.all2.ali_switch && !this.all2.wx_switch) {
            //支付宝
            this.paytype("zfb");
          } else if (!this.all2.wx_switch && !this.all2.ali_switch) {
            vant.Toast("未开通支付方式");
          }
        }
      }
    },
    //省市区确认
    queren: function(v) {
      if (!v[0].code || !v[1].code || !v[2].code) {
        vant.Toast("请完整选择省市区");
        return false;
      }
      this.all.address_province = v[0].name;
      this.all.address_city = v[1].name;
      this.all.address_district = v[2].name;

      this.all.province_code = v[0].code;
      this.all.city_code = v[1].code;
      this.all.district_code = v[2].code;

      this.shengshiqu =
        this.all.address_province +
        "  " +
        this.all.address_city +
        "  " +
        this.all.address_district;
      this.show2 = false;
    },
    //省市区取消
    quxiao: function() {
      this.show2 = false;
    },
    xiazai: function() {
      let img = document.getElementsByClassName("qrcode")[0].childNodes[1];
      var a = document.createElement("a");
      a.download = "erweima"; //这边是文件名，可以自定义
      a.href = img.src;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    creatQrCode(url) {
      this.img_log5 = true;
      this.$nextTick(() => {
        this.$refs.qrCodeUrl.innerHTML = "";
        let url = "11111111111";
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: url, // 需要转换为二维码的内容
          width: 310,
          height: 310,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    getimg: function(item) {
      this.all.top_pic = item;
    },

    getinfo2: function() {
      if (this.$route.query.one) {
        this.shishangpinye = true;
        return false;
      }
      let url = "";
      if (this.$route.query.shop_id) {
        console.log(1);
        //那就是分销商的店铺
        url =
          "/api/mstore/info?shop_id=" + window.atob(this.$route.query.shop_id);
      } else {
        //有shops_id就是页面
        if (this.$route.query.shops_id) {
          url = `/api/flow/storeinfo?id=${this.$route.query.shops_id}`;

          this.shishangpinye = true;
        } else {
          //都没有就是管理员店铺
          url = "/api/mstore/info";
        }
      }

      if (this.$route.query.one) {
        return false;
      }

      axios.get(url).then(response => {
        if (response.data.msg.code == 0) {
          this.alls = response.data.data;
          // if(this.alls.pact_check){
          //   this.checked = true
          // }
          if(!this.$route.query.app){
            document.title = this.alls.store_title || this.alls.store_name;
          }

        } else {
          vant.Toast(response.data.msg.info);
        }
      });
    },
    getinfo: function() {
      let url = "";
      if (this.$route.query.shops_id || this.$route.query.one) {
        url = "/api/flow/pageinfo?id=" + this.$route.query.id;
      } else {
        if (this.$route.query.shop_id) {
          url =
            "/api/page/info?id=" +
            this.$route.query.id +
            "&shop_id=" +
            window.atob(this.$route.query.shop_id);
        } else {
          url = "/api/page/info?id=" + this.$route.query.id;
        }
      }

      axios.get(url).then(response => {
        if (response.data.msg.code == 0) {

          if (response.data.data.selling_point) {
            response.data.data.selling_point = JSON.parse(
              response.data.data.selling_point
            );
          } else {
            response.data.data.selling_point = [];
          }

          if(response.data.data.image1){
            response.data.data.image2 = response.data.data.image1 + '?imageView2/1/w/2000'
          }

          this.all2 = response.data.data;

          if(this.$route.query.app){
            document.title = this.all2.title;
          }

          this.all2.yuyin = parseFloat(this.all2.yuyin);

          if (this.all2.pact_check == 1) {
            this.agreechecked = true;
          }

          //获取协议

          // axios.get(`${this.apis}/api/network-process-protocol/info?id=${this.item.protocol_id}`)
          // .then(response => {
          // 	this.xieyilist = response.data.data
          // })

          // document.title = this.all2.title || this.all2.sale_name;



          this.all.goods_sku = this.all2.fetch_code;
          this.gth_page_id = this.all2.gth_page_id;
          this.take_number = this.all2.take_number;
          this.pick_number_rules = this.all2.pick_number_rules;

          //发货地区问题
          if (this.all2.deliver_type == 3) {
            let data = this.areaList.province_list;
            let data2 = this.areaList.city_list;
            let data3 = this.areaList.county_list;

            if (this.all2.deliver_area != "") {
              this.all2.deliver_area = JSON.parse(this.all2.deliver_area);
              let obj = {};
              let obj2 = {};
              let obj3 = {};
              this.all2.deliver_area.forEach(items => {
                if (items[0]) {
                  Object.keys(data).map((key1, item1) => {
                    if (items[0] == key1) {
                      obj[key1] = data[key1];
                    }
                  });
                }
                if (items[1]) {
                  Object.keys(data2).map((key2, item2) => {
                    if (items[1] == key2) {
                      obj2[key2] = data2[key2];
                    }
                  });
                }
                if (items[2]) {
                  Object.keys(data3).map((key3, item3) => {
                    if (items[2] == key3) {
                      obj3[key3] = data3[key3];
                    }
                  });
                }
              });

              this.areaList.province_list = obj;
              this.areaList.city_list = obj2;
              this.areaList.county_list = obj3;
            }
          }
          if (this.all2.deliver_type == 1) {
            let data = JSON.parse(JSON.stringify(this.areaList.province_list));
            let data2 = JSON.parse(JSON.stringify(this.areaList.city_list));
            let data3 = JSON.parse(JSON.stringify(this.areaList.county_list));
            if (this.all2.nodeliver_area != "") {
              this.all2.nodeliver_area = JSON.parse(this.all2.nodeliver_area);
              this.all2.nodeliver_area.forEach(items => {
                Object.keys(data3).map((key3, item3) => {
                  if (items[2] == key3) {
                    delete this.areaList.county_list[key3];
                  }
                });
              });
            }
          }

          console.log("收货地区");
          console.log(this.areaList);

          //当前省市
          var sheng = sessionStorage.getItem("sheng");
          var shi = sessionStorage.getItem("shi");
          var qu = sessionStorage.getItem("qu");

          for (let i in this.areaList.county_list) {
            if (this.areaList.county_list[i] == qu) {
              this.nowcitycode = i;
              this.all.address_province = sheng;
              this.all.address_city = shi;
              this.all.address_district = qu;
              this.shengshiqu =
                this.all.address_province +
                "  " +
                this.all.address_city +
                "  " +
                this.all.address_district;
            }
          }
        } else {
          vant.Toast(response.data.msg.info);
        }
      });
    },
    //子组件传来的号码
    upnum(val) {
      console.log("子组件传来的号码");
      console.log(val);
      this.all.pretty_number = val.mobile;
      this.pickobg = val;
      this.showshow();
    },

    dataURLtoFile(dataurl, filename) {
      let arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {
        type: mime
      });
    },

    getRandomChar: function(len = 11) {
      var x = "0123456789qwertyuioplkjhgfdsazxcvbnm"; // 需要什么字符这里添加
      var tmp = "";
      var timestamp = new Date().getTime();
      for (var i = 0; i < len; i++) {
        tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
      }
      return timestamp + tmp;
    },
    //单个图片上传
    uploadok: function(file, who) {
      let name = this.getRandomChar() + "." + file.name.split(".")[1];
      var that = this;
      axios.post(`/api/qiniu/uploadtoken`, { name: name }).then(response => {
        if (response.data.msg.code == 0) {
          const observer = {
            next(res) {
              console.log(res);
            },
            error(err) {
              console.log(err);
            },
            complete(res) {
              that.$set(
                that.all,
                who,
                "https://gperson.gantanhaokeji.top/" + res.key
              );
            }
          };

          const options = {
            quality: 0.7,
            noCompressIfLarger: true,
            maxWidth: 1000,
          }

          qiniu.compressImage(file, options).then(data => {

            const observable = qiniu.upload(data.dist,name, response.data.data.token, {}, {})
            const subscription = observable.subscribe(observer) // 上传开始
          })

          // const observable = qiniu.upload(
          //   file,
          //   name,
          //   response.data.data.token,
          //   {},
          //   {}
          // );
          // const subscription = observable.subscribe(observer); // 上传开始
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },

    // uploadok: function(file,who) {
    //   var that = this;
    //   var reader = new FileReader()
    //   var img = new Image();
    //   reader.onload = function(e) {
    //     img.src = e.target.result;
    //   };
    //   var canvas = document.createElement('canvas');
    //   var context = canvas.getContext('2d');
    //   // base64地址图片加载完毕后
    //   let p = new Promise((r, j) => {
    //     img.onload = function() {
    //       // 图片原始尺寸
    //       var originWidth = this.width;
    //       var originHeight = this.height;
    //       // 最大尺寸限制
    //       var maxWidth = 1920,
    //         maxHeight = 1080;
    //       // 目标尺寸
    //       var targetWidth = originWidth,
    //         targetHeight = originHeight;
    //       // 图片尺寸超过400x400的限制
    //       if (originWidth > maxWidth || originHeight > maxHeight) {		              if (originWidth / originHeight > maxWidth / maxHeight) {
    //            // 更宽，按照宽度限定尺寸                  targetWidth = maxWidth;                  targetHeight = Math.round(maxWidth * (originHeight / originWidth));
    //           } else {                  targetHeight = maxHeight;
    //            targetWidth = Math.round(maxHeight * (originWidth / originHeight));		              }
    //       }
    //       // canvas对图片进行缩放
    //       canvas.width = targetWidth;
    //       canvas.height = targetHeight;
    //       // 清除画布
    //       context.clearRect(0, 0, targetWidth, targetHeight);
    //       // 图片压缩
    //       context.drawImage(img, 0, 0, targetWidth, targetHeight);

    //       let base64 = canvas.toDataURL("image/jpeg", 0.8); // 压缩后的base64图片
    //       let file2 = that.dataURLtoFile(base64, Date.parse(Date()) + ".jpg");
    // 	  r(file2)
    //     };
    //   })
    //   reader.readAsDataURL(file);
    //   p.then(files => {
    // 	  axios.post(`/api/qiniu/uploadtoken`)
    // 	  	.then(response => {
    // 	  	var qiniudata = new FormData();
    // 	  		qiniudata.append('file', files);
    // 	  		qiniudata.append('token',response.data.data);

    // 	  		axios.post('https://upload.qiniup.com',qiniudata)
    // 	  			.then(response => {
    // 	  				this.all[who] = 'https://pic.91haoka.cn/' + response.data.key
    // 	  			})
    // 	  })
    //   })
    // },

    afterRead1: function(file) {
      this.uploadok(file.file, "face_url");
    },
    afterRead2: function(file) {
      this.uploadok(file.file, "back_url");
    },
    afterRead3: function(file) {
      this.uploadok(file.file, "hand_url");
    },
    afterRead4: function(file) {
      this.uploadok(file.file, "custom_photos_url");
    },
    //提示选号
    tipsxh() {
      vant.Toast("请选择号码");
    },
    // 获取省市区
    async getssq() {
      await axios.get(`/api/ip-address/get`).then(response => {
        if (response.data.msg.code == 0) {
          sessionStorage.setItem(
            "sheng",
            response.data.data.addressComponent.province
          );
          sessionStorage.setItem(
            "shi",
            response.data.data.addressComponent.city
          );
          sessionStorage.setItem(
            "qu",
            response.data.data.addressComponent.district
          );
        } else {
          sessionStorage.setItem("sheng", "");
          sessionStorage.setItem("shi", "");
          sessionStorage.setItem("qu", "");
          // this.$message.error(response.data.msg.info);
        }
      });
    },

    //选择支付
    paytype(type) {
      // pay_way 0微信外 1支付宝 2微信内
      if (type == "zfb") {
        //支付宝支付
        this.all.pay_way = 1;
      } else if (type == "vx") {
        if (this.iswx) {
          //微信内支付
          this.all.pay_way = 2;
        } else {
          //微信外支付
          this.all.pay_way = 0;
        }
      }
      this.isshowzf = false;
      //下单
      this.xiadango();
    },
    //下单
    xiadango() {
      var that = this
      if (this.iscanxiadan) {
        this.iscanxiadan = false;
        axios.post(this.orderurl, this.all).then(response => {
          if (response.data.msg.code == 0) {
            vant.Toast("下单成功");

            if (this.all.pay_way.toString() == "") {
              //不支付
              if (this.$route.query.shops_id) {
                this.$router.push({
                  path: "/success",
                  query: {
                    shops_id: this.$route.query.shops_id,
                    app:this.$route.query.app?'1':'0'
                  }
                });
              } else {
                if (this.$route.query.shop_id) {
                  this.$router.push({
                    path: "/success",
                    query: {
                      shop_id: this.$route.query.shop_id,
                      app:this.$route.query.app?'1':'0'
                    }
                  });
                } else {
                  this.$router.push({
                    path: "/success",
                    query: {
                      app:this.$route.query.app?'1':'0'
                    }
                  });
                }
              }
            } else if (this.all.pay_way == 1) {
              //支付宝支付
              this.payGateWay = response.data.data;
              this.$nextTick(() => {
                this.$refs.alipayWap.children[0].submit();
              });
              this.all.pay_way = undefined;
            } else if (this.all.pay_way == 2) {
              //微信内支付
              WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                  appId: response.data.data.appId,
                  timeStamp: response.data.data.timeStamp,
                  nonceStr: response.data.data.nonceStr,
                  package: response.data.data.package,
                  signType: "MD5",
                  paySign: response.data.data.paySign
                },
                function(res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    setTimeout(() => {
                      if (that.$route.query.shops_id) {
                        that.$router.push({
                          path: "/success",
                          query: {
                            shops_id: that.$route.query.shops_id,
                            app:that.$route.query.app?'1':'0'
                          }
                        });
                      } else {
                        if (that.$route.query.shop_id) {
                          that.$router.push({
                            path: "/success",
                            query: {
                              shop_id: that.$route.query.shop_id,
                              app:that.$route.query.app?'1':'0'
                            }
                          });
                        } else {
                          that.$router.push({
                            path: "/success",
                            query: {
                              app:that.$route.query.app?'1':'0'
                            }
                          });
                        }
                      }
                    }, 500);
                  } else {
                    // that.all.pay_method = ""
                    // 	that.jiazaizhong = false
                    this.all.pay_way = undefined;
                  }
                }
              );
            } else if (this.all.pay_way.toString() == "0") {
              //微信外支付
              setTimeout(() => {
                window.location.href = response.data.data.h5_url;
              }, 500);
              this.all.pay_way = undefined;
            }

            this.iscanxiadan = true;
          } else {
            vant.Toast(response.data.msg.info);
            this.all.pay_way = undefined;
            this.iscanxiadan = true;
          }
        });
      }
    },
    //修改同意状态
    changeagree(val) {
      console.log(val);
      if (val && this.all2.protocol_qz) {
        this.logqueding = true;
        this.log1html = this.all2.pact_list[0];
      }
    },
    //不同意
    disagree() {
      this.logqueding = false;
      this.agreechecked = false;
    },
    backgo(){
      this.$router.push({
        path: "/index",
        query: {
          shop_id: this.$route.query.shop_id,
          shua:1
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
  .dibuanquan{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
/deep/ .el-dialog {
  background: rgb(246, 248, 251);
  border-radius: 29px;
}
.xianshi {
  background: rgb(64, 156, 255) !important;
  color: #fff !important;
}
/deep/ .el-divider__text {
  background: #f6f8fb;
}
/deep/ .van-popup2 {
  background: rgba(0, 0, 0, 0.3);
}
</style>

<style scoped>
.t_xiajia{
  background-color: #c4c4c4;
  font-size: 14px;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;

}
</style>
